<template>
  <div class="collapse">
    <div class="collapse-header">
      <div class="flex justify-content-start align-items-center">
        <i :class="icon"></i>
        <img v-if="imgSrc" :src="imgSrc" style="width: 14px; height: 14px" />
        <div class="collapse-header-text">{{ title }}</div>
      </div>
      <i
        class="collapse-header-arrow"
        :class="showList ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
        @click="toggleList"
      ></i>
    </div>
    <div class="collapse-list" v-show="showList">
      <template>
        <div
          class="collapse-list-item"
          v-for="(item, index) in list"
          :key="index"
        >
          <el-checkbox :value="item.id == value" @change="select(item.id)">{{
            item.name
          }}</el-checkbox>
        </div>
        <el-date-picker
          v-model="daterange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          size="small"
          style="margin: 10px 0 12px"
          @change="changeDate"
        >
        </el-date-picker>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "collapseDate",
  data() {
    return {
      selected: "",
      showList: true,
      daterange: "",
    };
  },
  computed: {},
  props: {
    icon: {
      type: String,
      default: "",
      require: false,
    },
    imgSrc: { type: String, default: "", require: false },
    value: {
      type: [String, Number, Array],
      default: "",
      require: true,
    },
    mutiple: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
      require: true,
    },
    list: {
      type: Array,
      default: () => [],
      require: true,
    },
  },
  methods: {
    changeDate() {
      this.$emit("on-pick", this.daterange);
    },
    select(id) {
      if (this.selected == id) {
        this.selected = "";
      } else {
        this.selected = id;
        this.daterange = "";
      }
      this.$emit("on-select", this.selected);
    },
    toggleList() {
      this.showList = !this.showList;
    },
  },
};
</script>

<style lang='less' scoped>
.collapse {
  background-color: white;

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 9px;
    font-size: 13px;
    background: #deebff;
    color: #333;
    &-text {
      margin-left: 5px;
      justify-content: flex-start;
    }
    &-arrow {
      font-size: 16px;
    }
  }
  &-list {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 5px 20px;
    &-item {
      width: 33%;
      text-align: left;
      padding: 8px 0;
      overflow: hidden;
    }
  }
}
.el-checkbox {
  color: #333;
}
.el-date-picker {
  margin: 10px 0 20px;
}
</style>